<template>
  <div id="ranking-board">
    <!--    <div class="ranking-board-title">地域排名</div>-->
    <el-row
      :gutter="24"
      style="overflow: hidden">
      <el-col
        :span="24"
        style="padding: 0">
        <histogram
          chart-type="bar"
          :raw-data="rawData"
          :custom-settings="customSettings"
          :loading="loading"
          :columns="['province', 'amount']"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import commonMixin from '@/mixins/common'
import histogram from '@/views/modules/dataV/components/histogram'

export default {
  name: 'TopLeft',
  components: { histogram },
  mixins: [ commonMixin ],
  data () {
    return {
      loading: false,
      rawData: [],
      /* eslint-disable */
      customSettings: {
        series: {
          label: { show: true, position: 'right', color: 'rgba(255,255,255, 1)', formatter: function (params) {
              return params.amount
            } }
        },
        xAxis: {
          show: false
        }
      }
      /* eslint-disable */
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loading = true
      let { data: res } = await this.$http.get(this.getApiUrl('datapanel/show/shipmentGroupByProvinceTop10', false))
      this.loading = false
      if (res.code === 0) {
        // this.rawData = res.data.concat()
        this.rawData = res.data.sort(function (a, b) {
          return parseInt(a.amount) - parseInt(b.amount)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>

  #ranking-board {
    /*box-shadow: 0 0 3px blue;*/
    /*background-color: rgba(6, 30, 93, 0.5);*/
    /*border-top: 2px solid rgba(1, 153, 209, .5);*/
    box-sizing: border-box;
    padding: 0px 30px;

    .ranking-board-title {
      font-weight: bold;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 20px;
    }

  }

  /*.el-carousel__container{ // 导致遮住图标横坐标*/
    /*height: 360px;*/
    /*overflow-x: hidden;*/
  /*}*/
</style>
